﻿<template>
    <el-tab-pane v-bind="$attrs">
        <template #label>
            <label class="el-checkbox el-checkbox--large" style="margin:0;" >
                <span class="el-checkbox__label" >{{ label }}</span>
            </label>
            <el-checkbox v-if="SupportSelectAll" @change="doCheckAll" size="large" style="margin:0 0 0 2px;" />
      </template>
        <slot />
    </el-tab-pane>
</template>

<script>
import {ElTabPane} from 'element-plus'
export default {
    inheritAttrs:true,
    extends: ElTabPane,
    props:{
        SupportSelectAll:Boolean,
    },
    provide(){
        return {
            CheckAll: this,
        };
    },
    inject:{
        UpCheckAll: { from: "CheckAll", default: null }
    },
    data(){
        return{
            items:[]
        }
    },
    mounted(){
        if(this.UpCheckAll){
            this.UpCheckAll.addItem(this);
        }
    },
    unmounted(){
        if(this.UpCheckAll){
            this.UpCheckAll.removeItem(this);
        }
    },
    methods:{
        addItem(item){
            this.items.push(item);
        },
        removeItem(item){
            let ix = this.items.indexOf(item);
            if(ix!=-1){
                this.items.splice(ix,1)
            }
        },
        doCheckAll(checked){
            this.items.forEach(x=>{
                if(x["doCheckAll"]){
                    x.doCheckAll(checked);
                }
            })
        }
    }
}
</script>
